<template>
  <!--  根据问题来源-->
  <div ref="ProblemCompletionSecond" :style="{height: height+'px'}">

  </div>


</template>

<script>
import echarts from "echarts";
import {Api} from '@/api/index.js'

export default {
  name: "ProblemCompletionSecond",
  props: {
    height: {
      type: Number,
      default: 350,
    },
    dataToQuery: {
      type: Object,
      default: {},
    },
    accountType: {
      type: String,
    }
  },
  data() {
    return {
      queryUrl: Api.problemCompletionSecond,
      queryCompanyUrl: Api.problemCompletionCompany,
      twoLevel: [],
      twoOrgMap: {},
      container: null,

    }
  },
  mounted() {
    this.container = echarts.init(this.$refs.ProblemCompletionSecond);
    this.query();
    this.queryTwoOrgList()
  },
  methods: {
    queryTwoOrgList() {
      this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
        this.twoLevel = res.data.data
        this.twoLevel.forEach(item => {
          this.twoOrgMap[item['orgName']] = item['orgId']
        });
      })
    },
    query() {
      let _this = this;
      this.container?.clear();
      this.container?.off('click');
      this.$http.post(this.queryUrl + this.accountType, this.dataToQuery).then(res => {
        if (res.data.status === 201) {
          this.$Message.error(res.data.msg);
        }
        if (res.data.status === 200) {
          let option = _this.getOption(res.data.data);
          this.container.setOption(option);
          this.container.on("click", this.onSelect);

        }
        window.onresize = this.container.resize;
      }).catch(e => {
        console.log(e)
        this.$Message.error("查询失败")
      });


    },
    onSelect(param) {
      event.stopPropagation() // 阻止冒泡
      //请求
      this.queryCompany(param.name);

    },
    getOption(data) {
      let names = [];
      let totalCount = [];
      let openCount = [];
      let completionRateCount = [];
      data.forEach(item => {
        names.push(item['companyName']);
        totalCount.push(item['totalCount']);
        openCount.push(item['openCount']);
        completionRateCount.push(item['completionRate']);
      })

      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          data: ['发现问题', '完成整改', '完成率(%)']
        },

        xAxis: [
          {
            type: 'category',
            axisTick: {show: false},
            data: names,
            axisLabel: {
              show: true,
              interval: 0,
              formatter: function (params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 4; // 一行显示几个字 然后就超过字数就会自动换行
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              },
            },
          }
        ],
        yAxis: [
          {
            name: '问题数量',
            type: 'value',
          },
          {
            name: '完成率(%)',
            type: 'value',
          }
        ],
        color: ['#42A5F5', '#FFC310', '#4CD1A8'],
        series: [
          {
            name: '发现问题',
            type: 'bar',
            smooth: true,
            yAxisIndex: 0,
            // barWidth : 30,
            barGap: "1%",
            label: {
              show: true,

            },
            itemStyle: {
              barBorderRadius: [4, 4, 0, 0],
            },
            data: totalCount,

          },
          {
            name: '完成整改',
            type: 'bar',
            yAxisIndex: 0,
            smooth: true,
            barGap: "1%",
            label: {
              show: true,

            },
            // barWidth: 30,
            itemStyle: {
              barBorderRadius: [4, 4, 0, 0],
            },

            data: openCount,
          },
          {
            name: '完成率(%)',
            type: 'bar',
            yAxisIndex: 1,
            smooth: true,
            barGap: "1%",
            label: {
              show: true,

            },
            // barWidth: 30,
            itemStyle: {
              barBorderRadius: [4, 4, 0, 0],
            },

            data: completionRateCount,
          },

        ]
      }
    },
    setCompanyOption(data) {
      let option = this.getCompanyOption(data);
      this.container.clear()
      this.container.off("click")
      this.container.setOption(option)
    },
    queryCompany(name) {
      let _this = this;
      let queryData = {...this.dataToQuery};
      queryData['belongOrgId'] = this.twoOrgMap[name];
      this.$http.post(this.queryCompanyUrl + this.accountType, queryData).then(res => {
        if (res.data.status === 201) {
          this.$Message.error(res.data.msg);
        }
        if (res.data.status === 200) {
          this.setCompanyOption(res.data.data)

        }
      }).catch(e => {
        console.log(e)
        this.$Message.error("查询失败")
      });
    },
    getCompanyOption(data) {
      let names = [];
      let totalCount = [];
      let openCount = [];
      let completionRateCount = [];
      data.forEach(item => {
        names.push(item['companyName']);
        totalCount.push(item['totalCount']);
        openCount.push(item['openCount']);
        completionRateCount.push(item['completionRate']);
      })

      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
        },
        toolbox: {
          show: true,//是否显示工具栏组件
          right: 20, // toolbox的定位位置
          top: -5,
          feature: {
            myTool1: {
              show: true,
              title: '返回',
              icon: "path://M853.333333 245.333333H245.333333l93.866667-93.866666c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333L256 311.466667h597.333333c6.4 0 10.666667 4.266667 10.666667 10.666666v426.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667V320c0-40.533333-34.133333-74.666667-74.666667-74.666667z",
              onclick: () => {
                this.query();
              }
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        legend: {
          data: ['发现问题', '完成整改', '完成率(%)']
        },
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: 20,
        }, {
          type: 'slider',
          textStyle: false
        }],
        xAxis: [
          {
            type: 'category',
            axisTick: {show: false},
            data: names,
            axisLabel: {
              show: true,
              interval: 0,
              formatter: function (params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 4; // 一行显示几个字 然后就超过字数就会自动换行
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              },
            },
          }
        ],
        yAxis: [
          {
            name: '问题数量',
            type: 'value',
          },
          {
            name: '完成率(%)',
            type: 'value',
          }
        ],
        color: ['#42A5F5', '#FFC310', '#4CD1A8'],
        series: [
          {
            name: '发现问题',
            type: 'bar',
            smooth: true,
            yAxisIndex: 0,
            // barWidth : 30,
            barGap: "1%",
            label: {
              show: true,

            },
            itemStyle: {
              barBorderRadius: [4, 4, 0, 0],
            },
            data: totalCount,

          },
          {
            name: '完成整改',
            type: 'bar',
            yAxisIndex: 0,
            smooth: true,
            barGap: "1%",
            label: {
              show: true,

            },
            // barWidth: 30,
            itemStyle: {
              barBorderRadius: [4, 4, 0, 0],
            },

            data: openCount,
          },
          {
            name: '完成率(%)',
            type: 'bar',
            yAxisIndex: 1,
            smooth: true,
            barGap: "1%",
            label: {
              show: true,

            },
            // barWidth: 30,
            itemStyle: {
              barBorderRadius: [4, 4, 0, 0],
            },

            data: completionRateCount,
          },

        ]
      }
    },


  }

}
</script>

<style scoped>

</style>
